.ui {
  &.tx-explain {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow: hidden;
    font-size: 12px;
    line-height: 14px;

    .tx-icon {
      width: 28px;
      height: 28px;
      border-radius: 2px;
      object-fit: cover;
    }
    .tx-explain {
      &-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: center;
        overflow: hidden;
        .name-and-address {
          max-width: 170px;
          justify-content: unset;
          gap: 4px;
          img {
            margin-left: 0 !important;
          }
          .name,
          .address {
            font-weight: normal;
            margin: 0;
            color: var(--r-neutral-foot, #babec5);
            font-size: 12px;
            line-height: 14px;
          }
        }
      }
      &-title,
      &-desc {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &-title {
        color: var(--r-neutral-title-1, #f7fafc);
      }
      &-desc {
        color: var(--r-neutral-foot, #babec5);
      }
    }
  }
  &.tx-id {
    font-size: 12px;
    line-height: 14px;
    .tx-id {
      color: var(--r-neutral-foot, #babec5);
      text-decoration: underline;
      &-chain {
        color: var(--r-neutral-body, #d3d8e0);
        margin-right: 8px;
      }
      &-container {
        margin-left: auto;
      }
    }
  }

  &.token-change {
    // flex-shrink: 0;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 14px;
    max-width: 200px;
    min-width: 130px;
    .token-change {
      &-item {
        display: flex;
        color: var(--r-neutral-body, #d3d8e0);
        justify-content: flex-end;
        &-text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &.is-success {
          color: var(--r-green-default, #2abb7f);
        }
        .token-icon {
          flex-shrink: 0;
          width: 14px;
          height: 14px;
          object-fit: cover;
          margin-right: 6px;
          border-radius: 50%;
        }
      }
    }
  }
}

// &__empty {
//   width: 100%;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   justify-content: center;
//   .no-data {
//     width: 100px;
//     height: 100px;
//     margin: 135px auto 0;
//   }
// }

// &-loading {
//   background-color: #fff;
//   border-radius: 6px;
//   padding: 8px 14px 16px;
//   &:not(:last-child) {
//     margin-bottom: 12px;
//   }
// }
